<template>
    <div>
        <div>
            <el-table
                    :ref="multipleSelection"
                    :data="Emps"
                    stripe
                    @selection-change="handleSelectionChange"
                    v-loading="loading"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        align="left"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="subtime"
                        label="提交时间"
                        width="150">
                </el-table-column>
                <el-table-column
                        align="left"
                        prop="name"
                        label="姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="sno"
                        label="学号"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="dept"
                        label="学院"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="major"
                        label="专业班级"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="warning" icon="el-icon-edit" size="mini" style="padding: 2px"
                                   @click="showEditEmp(scope.row)">查看注册详细</el-button>

<!--                        <el-button style="padding: 2px" size="mini" type="danger" round-->
<!--                                   @click="deleteEmpByid(scope.row)">删除-->
<!--                        </el-button>-->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                width="80%">
            <el-form ref="emp" :model="emp" :rules="rules" label-position="right" label-width="110px">
                <el-row>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item prop="name" label="姓名:">
                                <el-input size="small" class="width150" clearable prefix-icon="el-icon-edit"
                                          v-model="emp.name"/>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="性别:" prop="sex">
                                <el-radio size="small" v-model="emp.sex" :label="1" style="width: 30px">男</el-radio>
                                <el-radio size="small" style="padding-left: 0px" v-model="emp.sex" :label="0">女
                                </el-radio>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="学院:" prop="dept">
                                <el-input size="small" class="width150" clearable prefix-icon="el-icon-edit"
                                          v-model="emp.dept"/>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="专业班级:" prop="major">
                                <el-input size="small" class="width150" clearable prefix-icon="el-icon-edit"
                                          v-model="emp.major"/>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="民族:" prop="nationid">
                                <el-select size="small" placeholder="民族" class="width150" value="汉族">
                                    <el-option
                                            value="汉族"
                                            label="汉族">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="学号:" prop="sno">
                                <el-input size="small" clearable class="width150" v-model="emp.sno"
                                          :disabled="true"/>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="电子邮箱:" prop="email">
                                <el-input size="small" prefix-icon="el-icon-message" clearable class="width150"
                                          v-model="emp.email" placeholder="Email电子邮箱"/>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="电话号码:" prop="phone">
                                <el-input size="small" clearable class="width150" prefix-icon="el-icon-phone"
                                          v-model="emp.phone" placeholder="电话号码"/>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>

                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="学历:">
                                <el-select size="small"  placeholder="最高学历" class="width150" value="本科">
                                    <el-option
                                            value="本科"
                                            label="本科">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="毕业学校:">
                                <el-input size="small" clearable prefix-icon="el-icon-edit" class="width150"
                                          placeholder="毕业学校" value="韶关学院"/>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="入学日期:" prop="begintime">
                                <el-date-picker
                                        style="width: 150px"
                                        v-model="emp.begintime"
                                        type="date"
                                        size="small"
                                        placeholder="入学日期">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="毕业日期:" prop="endtime">
                                <el-date-picker
                                        style="width: 150px"
                                        v-model="emp.endtime"
                                        type="date"
                                        size="small"
                                        placeholder="毕业日期">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <div style="display: flex">
                            <el-form-item label="身份证号码:" prop="idcard">
                                <el-input size="small" clearable v-model="emp.idcard" placeholder="身份证号码"
                                          prefix-icon="el-icon-edit"/>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <div style="display: flex">
                            <el-form-item label="联系地址:" prop="address">
                                <el-input size="small" prefix-icon="el-icon-edit" clearable
                                          v-model="emp.address" placeholder="联系地址"/>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="用户角色:">
                                <el-select v-model="rolesIds" placeholder="请选择角色" multiple>
                                    <el-option
                                            v-for="item in roles"
                                            :key="item.id"
                                            :label="item.namezh"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="cancleAddEmp">取 消</el-button>
                <el-button size="small" type="primary" @click="addEmp">通过审核</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    const url = '/system/check/'
    export default {
        name: "SysCheck",
        data() {
            return {
                fileList: [],
                rolesIds: [],
                roles:[
                    {id:1,nameZh:'管理员'},
                    {id:2,nameZh:'教师'},
                    {id:3,nameZh:'保安'},
                    {id:4,nameZh:'学生'},
                ],
                registerFace: {
                    file: '',
                    name: '',
                    groupId: '',
                    faceId: '',
                },
                faceTitle: "上传图片",
                searchEmp: {
                    dept: '',
                    major: '',
                    posid: '',
                    engageform: '',
                    beginAndEnddate: '',
                },
                isUpload: false,
                advanceSearchIcon: 'fa fa-angle-double-down',
                showAdvanceSearchView: false,
                roomFaceDialogVisible: false,
                Emps: [],
                popoverVisible: false,
                loading: false,
                total: 0,
                page: 1,
                size: 10,
                keyword: '',
                dialogVisible: false,
                faceDialogVisible: false,
                multipleSelection: [],
                emp: {
                    name: "",
                    sex: '',
                    birthday: "",
                    idcard: "",
                    wedlock: "",
                    nationid: '',
                    nativeplace: "",
                    dept: '',
                    email: "",
                    phone: "",
                    address: "",
                    sno: "",
                    major: '',
                    engageform: "",
                    tiptopdegree: "",
                    specialty: "",
                    school: "",
                    begintime: "",
                    workstate: "在职",
                    contractterm: 0,
                    endtime: "",
                    notworkdate: null,
                    begincontract: "",
                    endcontract: "",
                    workage: null,
                    faceId: '',
                },
                rules: {
                    name: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                    ],
                    sex: [
                        {required: true, message: '请选择性别', trigger: 'change'}
                    ],
                    idcard: [
                        {required: true, message: '请输入身份证号码', trigger: 'blur'},
                        {min:18,max:18,message: '长度必须为18位',trigger: 'blur'}
                    ],
                    email: [{required: true, message: '请输入电子邮箱', trigger: 'blur'}],
                    phone: [{required: true, message: '请输入手机号码', trigger: 'blur'}],
                    address: [{required: true, message: '请输入家庭住址', trigger: 'blur'}],
                    begintime: [{required: true, message: '请选择入学日期', trigger: 'change'}],
                    endtime: [{required: true, message: '请选择毕业日期', trigger: 'change'}],
                    dept: [{required: true, message: '请输入学院名称', trigger: 'change'}],
                    major: [{required: true, message: '请输入专业班级', trigger: 'change'}],
                    role: [{required: true, message: '请选择角色', trigger: 'change'}],
                },
                politicsstatus: [],
                nations: [],
                positions: [],
                degree: ['博士', '硕士', '本科', '大专', '高中', '初中', '小学', '其他'],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                tempDepName: '',
                title: '',
                empFace: {
                    empId: '',
                    faceId: '',
                },
                roomFace: {
                    roomId: '',
                    faceId: ''
                },
                rfmultipleSelection: [],
            }
        },
        mounted() {
            this.initEmps();
            this.initRoles();
        },
        methods: {
            initRoles(){
                this.getRequest(url+'roles').then(resp=>{
                    if(resp){
                        this.roles = resp
                    }
                })
            },
            handleChange(file, fileList) {
                this.fileList = fileList
            },
            advanceSearch() {
                // console.log(this.searchEmp);
                this.page = 1;
                this.size = 10;
                this.initEmps();
                // this.emptySearchEmp();
            },
            emptySearchEmp() {
                this.searchEmp = {
                    dept: '',
                    major: '',
                    posid: '',
                    engageform: '',
                    beginAndEnddate: '',
                };
                this.page = 1;
                this.size = 10;
            },
            onSuccess(response, file, fileList) {
                this.isUpload = false;
                this.initEmps();
                this.$notify({
                    title: '添加成功',
                    type: "success",
                });
            },
            onError(response, file, fileList) {
                this.isUpload = false;
                this.$notify({
                    title: '添加失败',
                    type: "error",
                });
            },
            exportData() {
                this.$confirm('此操作将导出数据库中所有员工的资料, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    window.open('/employee/basic/export', '_parent');
                    this.$notify({
                        title: '导出成功',
                        type: "success",
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            clearSessionStorage() {
                window.sessionStorage.clear();
                this.initStableData();
            },
            emptyEmp() {
                this.emp = {
                    name: "",
                    sex: "",
                    birthday: "",
                    idcard: "",
                    dept: "",
                    major: '',
                    nativeplace: "",
                    politicid: '',
                    email: "",
                    phone: "",
                    address: "",
                    workid: "",
                    posid: '',
                    engageform: "",
                    tiptopdegree: "",
                    specialty: "",
                    school: "",
                    begintime: "",
                    workstate: "在职",
                    endtime: "",
                    notworkdate: null,
                    begincontract: "",
                    endcontract: "",
                    workage: null,
                    faceId: '',
                };
                this.tempDepName = '';
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            deleteMany() {
                this.$confirm('此操作将永久删除【' + this.multipleSelection.length + '】条记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids = '?';
                    this.multipleSelection.forEach(emp => {
                        ids += 'ids=' + emp.id + '&';
                    });
                    console.log(ids)
                    this.deleteRequest(url + ids).then(resp => {
                        if (resp) {
                            this.multipleSelection = [];
                            this.initEmps();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            deleteEmpByid(emp) {
                this.$confirm('此操作将永久删除【' + emp.name + '】该名员工, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest(url + emp.id).then(resp => {
                        if (resp) {
                            this.initEmps();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            cancleAddEmp() {
                this.dialogVisible = false;
                this.tempDepName = '';
                this.$refs.emp.resetFields()
            },
            handleUpdateEmp(emp) {
                let rids = '/'
                for(let c of this.rolesIds){
                    rids += c+','
                }
                rids = rids.substring(0,rids.length-1)
                if(rids.length===0){
                    this.$message.error("未选择角色！")
                }else{
                    this.putRequest(url+emp.id+rids).then(resp => {
                        if (resp) {
                            this.tempDepName = '';
                            this.emptyEmp();
                            this.dialogVisible = false;
                            this.initEmps();
                        }
                    })
                }
                // console.log(url+emp.id+rids)
            },
            emptyRegister() {
                this.registerFace = {
                    file: '',
                    name: '',
                    groupId: '',
                    faceId: '',
                }
            },
            addEmp() {
                this.$refs['emp'].validate(valid => {
                    if (valid) {
                        this.handleUpdateEmp(this.emp)
                    } else {
                        return false;
                    }
                })
            },
            handleAddEmp(emp) {
                this.postRequest("/employee/basic/", emp).then(resp => {
                    if (resp) {
                        this.tempDepName = '';
                        this.emptyEmp();
                        this.dialogVisible = false;
                        this.initEmps();
                    }
                })
            },
            showAddEmp() {
                this.emptyEmp();
                this.title = '添加员工';
                this.dialogVisible = true;
            },
            showEditEmp(data) {
                Object.assign(this.emp, data);
                this.title = '查看注册详细';
                this.dialogVisible = true;
                // console.log(this.emp)
            },
            currentPage(val) {
                this.page = val;
                this.initEmps();
            },
            sizeChange(val) {
                this.size = val;
                this.page = 1;
                this.initEmps();
            },
            initEmps() {
                this.loading = true;
                this.getRequest(url).then(resp => {
                    this.loading = false;
                    if (resp) {
                        this.Emps = resp
                    }
                })
            }
        }
    }
</script>

<style>
    .width150 {
        width: 150px;
    }

    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .8s ease;
    }

    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */
    {
        transform: translateX(10px);
        opacity: 0;
    }

</style>
<style scoped>
    /* 用来设置当前页面element全局table 选中某行时的背景色*/
    /deep/ .el-table__body tr.current-row>td{
        background-color: rgba(35,29,37,.9) !important;
        /* color: #f19944; */  /* 设置文字颜色，可以选择不设置 */
    }
    /deep/ .el-table, /deep/ .el-table__expanded-cell {
        background-color: rgba(35,29,37,.26);
    }
    /deep/ .el-table th, /deep/ .el-table tr, /deep/ .el-table td{
        background-color: rgba(35,29,37,.26);
    }
    /deep/ .el-table--enable-row-transition, /deep/ .el-table__body td, /deep/ .el-table .cell{
        background-color: rgba(35,29,37,.1);;
    }
    /deep/ .el-table .cell{
        color: rgba(256, 256, 256, 0.78);
    }
</style>